<template>
    <div style="width: 100%; height:100vh" class="watershed-information">

        <!--这是头部-->
        <div class="header">
            <i class="el-icon-menu" style="margin-left: 20px"> </i>
            <span id="header-left">水利部信息中心防汛调度会商平台</span>

            <!--下拉菜单-->
            <div style="float: right">
                <!--头像-->
                <el-avatar class="avatar" size="small" style="margin-left:100px "
                           src="https://img2.baidu.com/it/u=1994380678,3283034272&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1656435600&t=5a32231b9afe772bbc72e62789bc5b00"></el-avatar>
                <span style="color: white;font-size: 15px;margin-right: 25px;position: relative;top: -9px;left: 10px">qqs</span>

            </div>

        </div>


        <!--这是主体-->
        <div style="overflow: hidden;margin-top:30px">


            <el-row :gutter="20">
                <el-col :span="6" v-for="item in 12" :key="item.id" style="padding:20px; margin:5px auto;">

                    <el-card style="height:100px;">
                        <!--<div style="display: flex">-->

                        <!--<div>-->
                        <img class="cover"
                                src="https://img0.baidu.com/it/u=4226556508,940019821&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
                                style="opacity:0.5;width: 100px;;background-size: cover; background-repeat: no-repeat;
            background-position: center center; "/>
                        <!--</div>-->
                        <!--<div>-->
                        <div class="info">
                            <i class="el-icon-s-platform" style="line-height:50px;position: relative;left: -70px;top: -30px;"></i>
                            <a class="font_name"
                               :href="item.path+'?ticket='+username"
                               style="z-index:200;margin-top:100px;position: relative;left: -55px;top:-30px;"> 黄河四库防洪预报调度系统</a>
                        </div>
                            <!--</div>-->
                        <!--</div>-->


                    </el-card>
                </el-col>
            </el-row>

        </div>


    </div>
</template>

<script>


</script>

<style  scoped>


    .font_name {
        font-weight: 600;
        font-size: 19px;
        color: #1ea0fe
    }

    .avatar {
        margin-top: 20px
    }

    .header {
        height: 70px;
        background: #008bff;
        width: 100%
    }

    #header-left {
        font-size: 18px;

        color: white;
        line-height: 70px;
        margin-left: 10px
    }

    .el-row {
        margin-bottom: 20px;

    &
    :last-child {
        margin-bottom: 0;
    }

    }
    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>


<!--
<template>
    <div>

        <div class="login_top">
            <div style="position:relative;top: 150px;left: 550px;"><span style="font-size:30px;color:white;">水利部信息中心防汛调度会商平台</span>
            </div>
        </div>

        <el-card shadow="always" style="position:absolute;top:200px;left: 710px;">
            <span style="color: skyblue;">密码登录</span>

            <el-form style="border: 1px solid light" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="密码" prop="pass">
                    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model.number="ruleForm.age"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <div></div>
    </div>
</template>

<script>
    export default {
        data() {
            return {ruleForm:''}
        },
        methods: {}
    }

</script>


<style scoped>

    .login_top {
        overflow: hidden;
        width: 100%;
        height: 50vh;
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-image: url(https://img0.baidu.com/it/u=4226556508,940019821&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800)
    }
</style>
-->
